<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{.title}}</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .container { max-width: 800px; margin: 0 auto; }
        h1 { color: #333; }
        .card { border: 1px solid #ddd; border-radius: 4px; padding: 15px; margin-bottom: 15px; }
        .btn { display: inline-block; padding: 8px 12px; background-color: #4CAF50; color: white; text-decoration: none; border-radius: 4px; cursor: pointer; }
        .btn:hover { background-color: #45a049; }
        .btn-danger { background-color: #f44336; }
        .btn-danger:hover { background-color: #d32f2f; }
        .nav { margin-bottom: 20px; }
        .nav a { margin-right: 15px; }
        .form-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; }
        input { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="nav">
            <a href="/">首页</a>
            <a href="/users">用户列表</a>
            <a href="/api">网页制作</a>
        </div>
        
        <div class="card">
            <h1>{{.title}}</h1>
            <p>这是一个用户增删改查项目表。</p>
            
            <h2>添加用户</h2>
            <form id="addUserForm">
                <div class="form-group">
                    <label for="userId">用户ID:</label>
                    <input type="text" id="userId" required>
                </div>
                <div class="form-group">
                    <label for="userName">用户名:</label>
                    <input type="text" id="userName" required>
                </div>
                <div class="form-group">
                    <label for="userAge">年龄:</label>
                    <input type="number" id="userAge" required>
                </div>
                <button type="submit" class="btn">添加用户</button>
            </form>
        </div>
        
        <div id="response" class="card" style="display: none;"></div>
    </div>
    
    <script>
        document.getElementById('addUserForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const userId = document.getElementById('userId').value;
            const userName = document.getElementById('userName').value;
            const userAge = parseInt(document.getElementById('userAge').value);
            
            const userData = {
                id: userId,
                name: userName,
                age: userAge
            };
            
            fetch('/api/users', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(userData)
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP错误，状态码: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                const responseDiv = document.getElementById('response');
                responseDiv.style.display = 'block';
                responseDiv.innerHTML = '<h3>添加成功</h3><pre>' + JSON.stringify(data, null, 2) + '</pre>';
                
                // 清空表单
                document.getElementById('addUserForm').reset();
            })
            .catch(error => {
                console.error('Error:', error);
                const responseDiv = document.getElementById('response');
                responseDiv.style.display = 'block';
                responseDiv.innerHTML = '<h3>添加失败</h3><p>' + error.message + '</p>';
            });
        });
    </script>
</body>
</html>    